<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频投影</title>
    <link rel="stylesheet" href="./lib/styles1.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>视频投影</div>
        </div>

        <div class="params">
          <div class="button-box">
            <button @click="getLocation()">获取位置</button>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置x：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="video.curLocation[0]"
                placeholder="Number"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置y：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="video.curLocation[1]"
                placeholder="Number"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置z：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="video.curLocation[2]"
                placeholder="数字"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>视频投影路径：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="video.videoPosition"
                placeholder="填写视频路径"
              />
            </div>
          </div>
          <div class="button-box">
            <button @click="addVideoProjection()">添加视频投影</button>
          </div>
          <div class="item">
            <div class="label">
              <div>旋转Pitch</div>
              <div style="color: #b6b6cf">({{ video.rotation[0] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.rotation[0]"
                  :min="-89"
                  :max="89"
                />
                <input
                  type="number"
                  v-model="video.rotation[0]"
                  :min="-180"
                  :max="180"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>旋转Yaw</div>
              <div style="color: #b6b6cf">({{ video.rotation[1] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.rotation[1]"
                  :min="-180"
                  :max="180"
                />
                <input
                  type="number"
                  v-model="video.rotation[1]"
                  :min="-180"
                  :max="180"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>旋转Roll</div>
              <div style="color: #b6b6cf">({{ video.rotation[2] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.rotation[2]"
                  :min="-180"
                  :max="180"
                />
                <input
                  type="number"
                  v-model="video.rotation[2]"
                  :min="-180"
                  :max="180"
                />
              </div>
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>垂直夹角fov</div>
              <div style="color: #b6b6cf">({{ video.fov }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input type="range" v-model="video.fov" :min="0" :max="160" />
                <input type="number" v-model="video.fov" :min="0" :max="160" />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>纵横比aspectRatio</div>
              <div style="color: #b6b6cf">({{ video.aspectRatio }})</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.aspectRatio"
                  step="0.1"
                  :min="0.1"
                  :max="10"
                />
                <input
                  type="number"
                  v-model="video.aspectRatio"
                  step="0.1"
                  :min="0.1"
                  :max="10"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>投影距离distance</div>
              <div style="color: #b6b6cf">({{ video.distance }}m)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.distance"
                  :min="1"
                  :max="1000"
                />
                <input
                  type="number"
                  v-model="video.distance"
                  :min="1"
                  :max="1000"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>近裁距离minDistance</div>
              <div style="color: #b6b6cf">({{ video.minDistance }}m)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="video.minDistance"
                  :min="0"
                  :max="1000"
                />
                <input
                  type="number"
                  v-model="video.minDistance"
                  :min="0"
                  :max="1000"
                />
              </div>
            </div>
          </div>
          <div class="button-box">
            <button @click="getVideoProjection()">获取视频参数</button>
          </div>
          <div class="item">
            <textarea class="content" id="info">{{videoInfo}}</textarea>
          </div>
          <div class="button-box">
            <button @click="getInfo()">复制参数</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 按需获取
      const { createApp, watch, ref } = Vue
      let video = ref({
        rotation: [89, 120, 0], // 旋转
        fov: 90, // 垂直夹角
        aspectRatio: 1.5, // 纵横比
        distance: 100, // 投影距离
        minDistance: 5, // 近裁距离
        curLocation: [0, 0, 0], // 当前位置
        videoPosition: '' // 视频投影路径
      })
      // 贴花参数信息
      let videoInfo = ref('')
      let flag = false
      /**
       * 获取位置
       */
      const getLocation = async () => {
        alert('可以拾取坐标啦！')
        flag = true
      }
      /**
       * 添加视频投影
       */
      const addVideoProjection = async () => {
        __g.videoProjection.delete('vp1')
        let o = {
          id: 'vp1',
          videoURL: video.value.videoPosition, //视频地址
          location: video.value.curLocation.map(item => Number(item)),
          rotation: video.value.rotation.map(item => Number(item)),
          fov: Number(video.value.fov), //垂直夹角

          aspectRatio: Number(video.value.aspectRatio), //纵横比
          distance: Number(video.value.distance), //投影距离
          minDistance: Number(video.value.minDistance), //近裁距离
          depthCulling: false, //是否背面剔除 即背面不显示投影
          frustumVisible: true, //是否显示投影线框
          frustumColor: [1, 1, 1, 1] //投影线框颜色
        }

        await __g.videoProjection.add(o)
        await __g.videoProjection.focus(o.id)
      }
      /**
       * 更新视频投影属性
       */
      const update = async () => {
        let o = {
          id: 'vp1',
          rotation: video.value.rotation.map(item => Number(item)),
          fov: Number(video.value.fov),
          aspectRatio: Number(video.value.aspectRatio),
          distance: Number(video.value.distance),
          minDistance: Number(video.value.minDistance)
        }
        await __g.videoProjection.update(o)
      }

      /**
       * 获取视频投影参数信息
       */
      const getVideoProjection = async () => {
        let info = await __g.videoProjection.get('vp1')
        videoInfo.value = info.data[0]
      }
      /**
       * 复制视频投影参数
       */
      const getInfo = () => {
        const input = document.getElementById('info')
        input.select()
        document.execCommand('copy')
      }

      /**
       * 防抖
       * @param func setTimeout回调
       * @param wait setTimeout时间
       * @returns {(function(): void)|*}
       */
      const debounce = (func, wait) => {
        let timeout = null
        return function () {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            func()
          }, wait)
        }
      }
      watch(video, debounce(update, 100), { deep: true })

      // videoInfo监听，执行获取视频投影参数
      watch(videoInfo, getVideoProjection(), { deep: true })
      /**
       * 初始化三维
       * @constructor
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              // __g.reset()
            },
            onEvent: function (event) {
              const eventType = event.eventtype
              switch (eventType) {
                case 'LeftMouseButtonClick':
                  console.log(
                    '触发事件类型：鼠标左键单击，eventType：' + eventType
                  )
                  if (flag) {
                    video.value.curLocation = event.MouseClickPoint
                    flag = false
                  }

                  break
                default:
                  break
              }
            }
          }
        })
      }

      /**
       * 自适应分辨率
       * @returns {Promise<void>}
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }
      // vue挂载
      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)
          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          //页面离开事件(离开时清除此页面的操作及重置场景)
          window.onunload = function (e) {
            // 重置场景
            __g.reset(1 | 2 | 4)
          }
          return {
            addVideoProjection,
            video,
            getLocation,
            getVideoProjection,
            videoInfo,
            getInfo
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
